<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>abinzi</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <!---图标库--->
    <link rel="stylesheet" href="static/css/unicons.css">
    <link rel="stylesheet" href="../../../res/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/style.css">
    <script type="text/javascript" src="../../../res/layui/layui.js"></script>
    <style type="text/css">
        body{
            background-size:100% 100%;
            background: url("../../../res/img/back.jpg") no-repeat fixed;
        }
    </style>
</head>
<body>
<div class="section">
    <div class="container">
        <div class="row full-height justify-content-center">
            <div class="col-12 text-center align-self-center py-5">
                <div class="section pb-5 pt-5 pt-sm-2 text-center">
                    <h6 class="mb-0 pb-3"><span class="butss">登录</span><span class="butss">注册</span></h6>
                    <input class="checkbox" type="checkbox" id="reg-log" name="reg-log">
                    <label for="reg-log" id="this"></label>
                    <div class="card-3d-wrap mx-auto">
                        <div class="card-3d-wrapper">
                            <div class="card-front">
                                <div class="center-wrap">
                                    <div class="section text-center">
                                        <h4 class="mb-4 pb-3">登录</h4>
                                        <div class="form-group">
                                            <input type="email" name="userEmil" class="form-style" placeholder="邮箱"
                                                   id="userEmil" autocomplete="off">
                                            <i class="input-icon uil uil-at"></i>
                                            <input hidden="hidden" name="userHeadPortrait" id="userHeadPortrait">
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="password" name="userPwd" class="form-style" placeholder="密码"
                                                   id="userPwd" autocomplete="off">
                                            <i class="input-icon uil uil-lock-alt"></i>
                                        </div>
                                        <input type="button" id="login" class="btn mt-4" value="提交">
                                        <p class="mb-0 mt-4 text-center"><a href="#0" class="link">忘记密码?</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="card-back">
                                <div class="center-wrap">
                                    <div class="section text-center">
                                        <h4 class="mb-4 pb-3">注册</h4>
                                        <div class="form-group">
                                            <input type="text" name="userName" class="form-style" placeholder="名称"
                                                   id="logname" autocomplete="off">
                                            <i class="input-icon uil uil-user"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="email" name="userEmil" class="form-style" placeholder="邮箱"
                                                   id="logemail" autocomplete="off">
                                            <i class="input-icon uil uil-at"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="password" name="userPwd" class="form-style" placeholder="密码"
                                                   id="logpass" autocomplete="off">
                                            <i class="input-icon uil uil-lock-alt"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="file" name="fileOne" class="form-style" placeholder="上传"
                                                   id="fileOne" autocomplete="off">
                                            <button id="btnone"  type="button" class="form-style">上传文件</button>
                                            <a id="tsone" target="_blank" style="text-decoration:none"></a>
                                            <i class="input-icon uil uil-lock-alt"></i>
                                        </div>
                                        <input type="button" id="enroll" class="btn mt-4" value="提交">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use('layer', function () {
        let $ = layui.jquery;
        $(".butss").on("click", function () {
            layer.tips('点击这里噢~', '#this', {
                tips: [3, '#F91707'],
                time: 2000
            });
        });

        $("#logemail").on("blur",function () {
            let url = "../../../MyUserAction/getMail/"+this.value;
            let mail;
            $.get(url,null,function (data) {
                mail = data.data.data;
            })
            if(mail){
                layer.tips('这个邮箱貌似已经注册过了噢，要不去试试登录吧', '#logpass', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }
        })

        /**
         *登录
         */
        $("#login").on("click", function () {
            let userEmil = $("#userEmil");
            let userPwd = $("#userPwd");

            //验证邮箱是否为空
            if (!userEmil.val()) {
                layer.tips('这里还没填呢', '#userEmil', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return null;
                //验证密码是否为空
            } else if (!userPwd.val()) {
                layer.tips('密码记住要填的哟~', '#userPwd', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return null;
            }
            let url = "../../../MyUserAction/isLogin";
            let data = {
                userEmil: userEmil.val(),
                userPwd: userPwd.val()
            };
            $.get(url, data, function (data) {
                if (data.data.data === 0) {
                    layer.msg('账号或密码错了，在仔细想想', {icon: 5});
                } else if(data.data.data === 1) {
                    window.location.href = '../../../admin/std/dist/views/index.html';
                }else if(data.data.data === 2){
                    layer.msg('您的邮箱还未验证，去邮箱找找我发送给你的验证链接吧', {icon: 6});
                }
            })
        });
        $("#btnone").click(function () {
            $("#fileOne").click();
            $("#fileOne").change(function(obj){
                var fileInput = $('#fileOne').get(0).files[0];//获取input控件的file
                if(fileInput){
                    var str=fileInput.name;
                    //取后缀名
                    $("#tsone").html(str.substring(0,4)+"..."+str.match(/\.([^\.]+)$/)[1]);
                }
            });
        });
        /**
         * 注册.
         */
        $("#enroll").on("click", function () {
            let logname = $("#logname");
            let logemail = $("#logemail");
            let logpass = $("#logpass");
            //验证名称是否为空
            if (!logname.val()) {
                layer.tips('敢问壮士尊姓大名', '#logname', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }
            //验证邮箱是否为空
            if (!logemail.val()) {
                layer.tips('邮箱不能忘了呀', '#logemail', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }
            //验证密码是否为空
            if (!logpass.val()) {
                layer.tips('密码呢？', '#logpass', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }

            //验证邮箱格式是否正确
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if(!reg.test(logemail.val())){
                layer.tips('邮箱会不会记错了呀', '#logemail', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }
            //验证密码是否为六位数以上
            if(logpass.val().length < 5){
                layer.tips('请输入6位以上的密码吧', '#logpass', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }

            //验证此邮箱是否已经注册过
            let url = "../../../MyUserAction/getMail/"+logemail.val();
            let mail;
            $.get(url,null,function (data) {
                mail = data.data.data;
                console.info(mail);
            });
            if(mail){
                layer.tips('你已经注册过了，不要重复注册噢', '#logpass', {
                    tips: [3, '#F91707'],
                    time: 2000
                });
                return false;
            }
            //新增用户
            url = "../../../MyUserAction/addUser";
            data = {
                userName: logname.val(),
                userEmil: logemail.val(),
                userPwd: logpass.val()

            };
            $.post(url, data, function (data) {
                if (data.data.data === 0) {
                    layer.msg('貌似出了点什么小问题，要不要重新试试呢？', {icon: 5});
                } else {
                    layer.msg('注册成功快去登录吧~', {icon: 2});
                }
            })
        });
    })
</script>
</body>
</html>